<template>
  <footer class="system-footer">
    <nav class="system-footer_navs">
      <ol>
        <li
          class="system-menus-linker"
          v-for="menu in menus"
          :key="menu.linker"
          :class="{ active: route.name === menu.linker }"
          @click="goPage(menu)"
        >
          <!-- <img :src="menu.icon" alt="" /> -->
          <Iconfont :name="menu.icon" :color="route.name === menu.linker ? '#FF2D55' : '#444444'" size="20" />
          <span>{{ menu.name }}</span>
        </li>
      </ol>
    </nav>
  </footer>
</template>
<script setup lang="ts" name="H5Footer">
import userinfo from "@/store/userinfo";
const piniaUserinfo: any = userinfo();
const route = useRoute();
const router = useRouter();

const { t } = useI18n();

const data: any = reactive({
  menus: [
    {
      icon:"icon-icon_shouye_normal",
      name: computed(() => t('home.btn1')),
      linker: "Home",
    },
    {
      icon:"icon-icon_tuijian_normal",
      name: computed(() => t('home.btn2')),
      linker: "recommend",
    },
    {
      icon:"icon-icon_zijin",
      name: computed(() => t('my.test4')),
      linker: computed(() => (piniaUserinfo.getHaslogged ? 'recharge' : 'login')),
    },
    {
      icon: "icon-icon_jieguo_press",
      name: computed(() => t('home.btn3')),
      linker: "result",
    },
    {
      icon: computed(() =>
        piniaUserinfo.getHaslogged ? 'icon-icon_zhanghu_normal' : 'icon-a-icon_login'
      ),
      name: computed(() =>
        piniaUserinfo.getHaslogged ? t('home.btn4') : t('home.btn5')
      ),
      linker: computed(() => (piniaUserinfo.getHaslogged ? 'me' : 'login')),
    },
  ],
});
const { menus } = toRefs(data);
const goPage = (menu: any) => {
  if(menu?.linker == 'recharge') {
    router.push({
      name: menu.linker,
    });
  } else {
    router.replace({
      name: menu.linker,
    });
  }
};
</script>
<style lang="scss" scoped>
.system-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  padding-bottom: 12rem;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: 60rem;
  width: 100%;
  border-top: 1rem solid #f2f2f2;
 background: #FFF4F7;
  .system-footer_navs {
    padding-top: 5rem;
    width: 100%;
    ol {
      display: flex;
      justify-content: space-around;
      align-items: baseline;
      li {
        color: #444;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 20%;
        img {
          width: 24rem;
          height: 24rem;
        }
        span {
          font-weight: 600;
          margin-top: 5rem;
          font-size: 10rem;
          text-align: center;
        }
      }
      .active {
        span {
          color: #ff2d55;
        }
      }
    }
  }
}
</style>
